<template>
	<view class="conter">
		<header-box :title="title"></header-box>

		<view class="conter-text">
			<view class="bgc">
				<navigator url="/#" class="text-heig" @click="showNum1 = true">
					<text>选择类型</text>
					<view class="" style=" font-size: 24rpx;">
						{{classInit}}
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</navigator>
				<view class="text-heig" @click="show = true">
					<text>日期</text>
					<view class="" style=" font-size: 24rpx;">
						{{dataTime}}
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<!-- <navigator url="/#" class="text-heig" @click="showNum1 = true">
					<text>入库类型</text>
					<view class="" style=" font-size: 24rpx;">
						{{classInit}}
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</navigator> -->
				<view class="" v-if="textType == 2 ">
					<navigator url="/pages/putStock/danweiList" class="text-heig">
						<!-- <text v-if="nitName === '' ">往来单位</text>
						<text v-if="nitName !== '' ">{{nitName}}</text> -->
						<text>借出单位</text>
						<view class="" style=" font-size: 24rpx;">
							{{nitName}}
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
					</navigator>
					<!-- <view class="text-heig" @click="showNum = true">
						<text>数量</text>
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view> -->
					<!-- <navigator  url="/pages/shopping/select" class="text-heig">
						<text>{{monad}}</text>
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</navigator> -->
					<navigator url="/pages/shopping/stock" class="text-heig">
						<text>仓库</text>
						<view class="" style=" font-size: 24rpx;">
							{{stockName}}
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
					</navigator>
				</view>
				<!-- <navigator url="/pages/shopping/classShopp" class="text-heig">
					<text>分类</text>
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</navigator> -->


				<view class="text-heig" @click="showNum = true">
					<text>备注</text>
					<text style="color: #999999; font-size: 30rpx;">{{memo ? memo : '请输入备注'}}</text>
				</view>


				<!-- <view class="left-box">
					<text>入库图片</text>
					<view class="" style="margin-top: 20rpx;">
						<u-upload :action="action" @on-success="uploadImage" width="200rpx" height="200rpx" :file-list="fileList"></u-upload>
					</view>
				</view> -->
			</view>


			<view class="box-top flex-around">
				<!-- <navigator v-if="navigatorProp == '4'" :url="'/pages/putStock/list?stock='+ stock" class="">
					选择商品  pages/putStock/goodsList
				</navigator> -->
				<navigator v-if="navigatorProp == '2'" url="/pages/putStock/goodsList" class="">
					选择商品
				</navigator>
				<!-- -->
				<navigator v-if="navigatorProp == '4'" url="/pages/removeStock/tabList" class="">
					选择借出单
				</navigator>
			</view>


			<!-- godList -->
			<view class="bgc" style="margin-top: 30rpx;" v-if=" navigatorProp == 4">
				<view class="boc-bott" v-for="(item, index) in listFrom" :key="index" @tap="removeFrom(item.id)">
					<view class="lin-heig flex-box">
						<view class="flex-center">
							<block v-for="(item1, id) in item.goods" :key="id">
								<view class="" style="width: 90rpx; height: 90rpx;">
									<image :src="item1.image" mode=""></image>
								</view>
								<view class=""
									style="font-size: 28rpx;color: #000000;font-weight: 700;margin-left: 31rpx;line-height:50rpx;">
									{{item1.name}}
									<view class="" style="font-size: 24rpx; font-weight: 300;">
										数量: {{item1.num}} {{item1.unit}}
									</view>
									<block v-for="(item, index) in listFrom" :key="index">
										<view class="" style="font-size: 24rpx; font-weight: 300;"
											v-for="(item, index) in godList" :key="index">
											备注: {{item.memo}}
										</view>
									</block>
								</view>
							</block>
						</view>
						<view class="">
							<view class="">
								{{item.company}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- listFrom -->
			<view class="bgc" style="margin-top: 30rpx;" v-if=" navigatorProp == 2">
				<view class="boc-bott" v-for="(item, index) in godList" :key="index" @tap="removeShopping(item.id)">
					<view class="lin-heig flex-box">
						<view class="flex-center">
							<view class="" style="width: 90rpx; height: 90rpx;">
								<image :src="item.image" mode=""></image>
							</view>
							<view class=""
								style="font-size: 28rpx;color: #000000;font-weight: 700;margin-left: 31rpx;line-height:50rpx;">
								{{item.name}}
								<view class="" style="font-size: 24rpx; font-weight: 300;">
									数量: {{item.num}} {{item.unit}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="add bg-gradual-green" @click="addGoods">
			确定
		</view>








		<!-- 数量 -->
		<u-popup v-model="showNum" mode="center" width="500rpx" height="280rpx" border-radius="14">
			<view class=""
				style="width: 100%; height: 100rpx; line-height: 100rpx;text-align: center; font-size: 30rpx;">
				备注
			</view>
			<view class="" style="padding: 0 40rpx; height: 60rpx; line-height: 60rpx;">
				<input type="text" v-model="memo" style="text-align: center;background-color: #F0F0F0; height: 100%;"
					placeholder="请输入内容" placeholder-style="text-align:center;" />
			</view>
			<view class="box-btn">
				<view class="back" style="background-color: #CCCCCC; color: #FFFFFF;" @click="showNum = false">
					取消
				</view>
				<view class="back bg-gradual-green" @click="showNum = false">
					确定
				</view>
			</view>
		</u-popup>


		<u-popup v-model="showNum2" mode="center" width="500rpx" height="200rpx" border-radius="14">
			<view class=""
				style="width: 100%; height: 100rpx; line-height: 100rpx;text-align: center; font-size: 30rpx;">
				移除
			</view>
			<!-- <view class="" style="padding: 0 40rpx; height: 60rpx; line-height: 60rpx;">
				<input type="text" v-model="memo" style="text-align: center;background-color: #F0F0F0; height: 100%;"
					placeholder="请输入内容" placeholder-style="text-align:center;" />
			</view> -->
			<view class="box-btn">
				<view class="back" style="background-color: #CCCCCC; color: #FFFFFF;" @click="showNum2 = false">
					取消
				</view>
				<view class="back bg-gradual-green" @click="addRemove">
					确定
				</view>
			</view>
		</u-popup>

		<!-- 借出类型 -->
		<u-popup v-model="showNum1" mode="center" width="500rpx" height="280rpx" border-radius="14">
			<view class=""
				style="width: 100%; height: 100rpx; line-height: 100rpx;text-align: center; font-size: 30rpx;">
				选择类型
			</view>
			<view class="box-radio">
				<!-- 入库类型 -->
				<u-radio-group v-if="stock == 1" v-model="value" @change="radioGroupChange">
					<u-radio v-for="(item, index) in list" :key="index" :name="item" :disabled="item.disabled">
						{{item.elest}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="box-btn">
				<view class="back" style="background-color: #CCCCCC; color: #FFFFFF;" @click="showNum1 = false">
					取消
				</view>
				<view class="back bg-gradual-green" @click="typeText">
					确定
				</view>
			</view>
		</u-popup>



		<!-- 日历弹层 -->
		<u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>

	</view>
</template>

<script>
	import headerBox from '../../components/header/header.vue'
	export default {
		components: {
			headerBox
		},
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false,
					timestamp: true,
				},
				action: this.$IMG_URL,
				title: '添加入库单',
				showNum: false,
				showNum1: false,
				showNum2: false,
				show: false,
				mode: 'date',
				list: [{
						name: '2',
						disabled: false,
						elest: '购入',
					},
					{
						name: '1',
						disabled: false,
						elest: '归还',
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				stock: '1',
				listFrom: [],
				searchVal: '',
				nitName: '',
				monad: '单位',
				stockName: '',
				typeName: '',
				classInit: '类型',
				init: '',
				stockId: '',
				pathImage: '',
				turnover_id: '', // 入库类型ID
				textInput: '', // 输入的备注
				page: 1,
				rows: 10,
				memo: '',
				dataTime: '请选择时间',
				godList: [],
				danweiID: '',
				stockId: '',
				navigatorProp: '',
				textType: '',
				shoppingId: '',
			}
		},
		onLoad(e) {
		
			this.stock = e.item
			this.nitName = e.name
			this.stockSelect(this.stock)
			
			console.log('godList', this.godList)
		},
		onShow() {
			this.nitName = this.searchVal.name
			this.navigatorProp = uni.getStorageSync('navigatorProp')
			this.listFrom = uni.getStorageSync('list')
			this.godList = uni.getStorageSync('goodsList')
			console.log('navigatorProp', this.navigatorProp)
		},
		onHide() {
			
		},
		methods: {
			// 确定移除对应的用户
			addRemove() {

				if (this.listFrom.length == 0) {
					this.godList.forEach((item, index, j) => {
						if (item.id == this.shoppingId) {
							this.godList.splice(index, 1)
						}
					})
					this.showNum2 = false
				} else {
					this.listFrom.forEach((item, index, j) => {
						if (item.id == this.shoppingId) {
							this.listFrom.splice(index, 1)
						}
					})
					this.showNum2 = false
				}


			},


			removeShopping(id) {
				this.showNum2 = true
				this.shoppingId = id
			},

			removeFrom(id) {
				this.showNum2 = true
				this.shoppingId = id
			},

			// 确定入库商品
			async addGoods() {
				console.log('this.navigatorProp', this.navigatorProp)
				if (this.navigatorProp == 4) {
					const res = await this.$u.post("api/jinxiao.Enter/add", {
						// store_id: this.stockId,
						// time: this.dataTime,
						// turnover_id: this.turnover_id,
						// company_id: this.danweiID,
						// goods: JSON.stringify(this.godList),
						// memo: this.memo,
						back_store_id: this.listFrom[0].id,
					});
					if (res.code != 1) return this.$tools.msg('归还失败,稍后重试!')
					this.$tools.msg(res.msg)
					uni.navigateTo({
						url: '/pages/tab/index'
					})
					uni.removeStorageSync('list')
					uni.removeStorageSync('navigatorProp')
				}
				if (this.navigatorProp == 2) {
					this.godList.forEach((item, index, j) => {
						delete item.name
						delete item.image
						delete item.unit
					})
					const res = await this.$u.post("api/jinxiao.Enter/add", {
						store_id: this.stockId,
						time: this.dataTime,
						turnover_id: this.turnover_id,
						company_id: this.danweiID,
						goods: JSON.stringify(this.godList),
						memo: this.memo,
						// back_store_id: this.godList[0].id,
					});
					if (res.code != 1) return this.$tools.msg('归还失败,稍后重试!')
					this.$tools.msg(res.msg)
					uni.navigateTo({
						url: '/pages/tab/index'
					})
					uni.removeStorageSync('goodsList')
					uni.removeStorageSync('navigatorProp')
				}
			},

			typeText() {
				this.showNum1 = false
			},


			// 上传图片
			uploadImage(e) {
				this.pathImage += e.data + ','
				console.log('上传图片,', this.pathImage)
			},


			stockSelect() {
				if (this.stock == '1') {
					this.title = '添加入库单'
				}
				if (this.stock == '2') {
					this.title = '添加出库单'
				}
			},

			change(e) {
				console.log(e);
			},

			confirm(e) {
				console.log('确定选择', e)
				this.dataTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
			},

			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
				if (e.name == '1') {
					this.navigatorProp = '4'
					uni.setStorageSync('navigatorProp', 4)
					this.classInit = e.elest

					this.dataTime = '请选择' + e.elest + '时间'

					this.textType = 1 // 直接选时间和备注 购入
				} else {
					this.navigatorProp = '2'
					uni.setStorageSync('navigatorProp', 2)
					this.textType = 2
					this.classInit = e.elest
					this.dataTime = '请选择' + e.elest + '时间'
				}
				this.turnover_id = e.name
				this.showNum1 = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	.conter {
		width: 100%;
		// height: 100%;
		margin-bottom: 200rpx;
		position: relative;
		margin-bottom: 240rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.conter-text {
		padding: 30rpx;

		.bgc {
			width: 100%;
			// height: 200rpx;
			padding: 0 30rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;

			.text-heig {
				height: 108rpx;
				line-height: 108rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #F0F0F0;
			}


			.left-box {
				height: 310rpx;
				padding-top: 30rpx;

				/deep/.u-list-item.data-v-3d60ab68 {
					margin: 0 !important;
				}
			}


			.shop-heig {
				height: 144rpx;
				padding-top: 40rpx;

				view {
					margin-top: 24rpx;
					border-bottom: 1rpx solid #F0F0F0;
				}
			}
		}

		.box-top {
			color: #333333;
			margin-top: 30rpx;

			navigator {
				width: 40%;
				height: 70rpx;
				line-height: 70rpx;
				background-color: #FFFFFF;
				border-radius: 35rpx;
				text-align: center;
			}
		}
	}

	.add {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		width: 90%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		transform: translateX(-50%);
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
	}


	.box-btn {
		height: 100rpx;
		width: 90%;
		margin: 30rpx auto 30rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-around;

		.back {
			width: 40%;
			height: 60rpx;
			border-radius: 30rpx;
			line-height: 60rpx;
			text-align: center;
		}

		view:last-child {
			border-right: 0;
		}
	}


	.box-radio {
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-around;
	}




	.boc-bott {
		border-bottom: 1rpx solid #F0F0F0;

		.lin-heig {
			height: 160rpx;
		}
	}

	.boc-bott:last-child {
		border-bottom: 0;
	}
</style>
